<template>
  <div style="padding: 20px;">
    <h1>后端接口交互完整示例</h1>

    <!-- 模式一：通过 Nuxt Server API（推荐） -->
    <div style="border: 3px solid green; padding: 20px; margin: 20px 0;">
      <h2>✅ 模式一：通过 Nuxt Server API（推荐）</h2>
      
      <div style="background: #f0f0f0; padding: 15px; margin: 10px 0;">
        <h3>1. GET 请求示例</h3>
        <button @click="fetchUsers" style="padding: 10px 20px; margin: 5px;">获取用户列表</button>
        <pre v-if="users">{{ users }}</pre>
      </div>

      <div style="background: #f0f0f0; padding: 15px; margin: 10px 0;">
        <h3>2. 动态路由请求</h3>
        <button @click="fetchPost(1)" style="padding: 10px 20px; margin: 5px;">获取文章1</button>
        <button @click="fetchPost(2)" style="padding: 10px 20px; margin: 5px;">获取文章2</button>
        <pre v-if="post">{{ post }}</pre>
      </div>

      <div style="background: #f0f0f0; padding: 15px; margin: 10px 0;">
        <h3>3. POST 请求示例</h3>
        <input v-model="loginForm.username" placeholder="用户名" style="padding: 5px; margin: 5px;"><br>
        <input v-model="loginForm.password" type="password" placeholder="密码" style="padding: 5px; margin: 5px;"><br>
        <button @click="handleLogin" style="padding: 10px 20px; margin: 5px;">登录</button>
        <p v-if="loginResult">{{ loginResult }}</p>
      </div>

      <div style="background: #e8f5e9; padding: 15px; margin: 10px 0;">
        <h4>优势：</h4>
        <ul>
          <li>✅ 隐藏真实后端地址</li>
          <li>✅ 统一处理认证和 header</li>
          <li>✅ 服务端直接调用，无需 HTTP 请求（首次渲染）</li>
          <li>✅ 可以缓存、转换数据</li>
          <li>✅ 统一错误处理</li>
          <li>✅ 解决 CORS 问题</li>
        </ul>
      </div>
    </div>

    <!-- 模式二：直接调用后端 API -->
    <div style="border: 3px solid orange; padding: 20px; margin: 20px 0;">
      <h2>⚠️ 模式二：直接调用外部后端 API</h2>
      
      <div style="background: #f0f0f0; padding: 15px; margin: 10px 0;">
        <button @click="fetchDirectly" style="padding: 10px 20px; margin: 5px;">直接调用外部 API</button>
        <pre v-if="directData">{{ directData }}</pre>
      </div>

      <div style="background: #fff3e0; padding: 15px; margin: 10px 0;">
        <h4>注意事项：</h4>
        <ul>
          <li>⚠️ 暴露后端地址</li>
          <li>⚠️ 可能遇到 CORS 问题</li>
          <li>⚠️ 首次渲染也会发 HTTP 请求（慢）</li>
          <li>⚠️ 无法统一处理认证</li>
          <li>✅ 适合公开的第三方 API</li>
        </ul>
      </div>
    </div>

    <!-- 不同请求方法对比 -->
    <div style="border: 3px solid blue; padding: 20px; margin: 20px 0;">
      <h2>📚 useFetch vs $fetch 对比</h2>
      
      <table style="width: 100%; border-collapse: collapse;">
        <tr style="background: #e3f2fd;">
          <th style="border: 1px solid #ddd; padding: 10px;">方法</th>
          <th style="border: 1px solid #ddd; padding: 10px;">使用场景</th>
          <th style="border: 1px solid #ddd; padding: 10px;">SSR支持</th>
          <th style="border: 1px solid #ddd; padding: 10px;">响应式</th>
        </tr>
        <tr>
          <td style="border: 1px solid #ddd; padding: 10px;"><code>useFetch</code></td>
          <td style="border: 1px solid #ddd; padding: 10px;">组件中获取数据（推荐）</td>
          <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
          <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
        </tr>
        <tr>
          <td style="border: 1px solid #ddd; padding: 10px;"><code>$fetch</code></td>
          <td style="border: 1px solid #ddd; padding: 10px;">事件处理、手动请求</td>
          <td style="border: 1px solid #ddd; padding: 10px;">⚠️ 需注意</td>
          <td style="border: 1px solid #ddd; padding: 10px;">❌ 否</td>
        </tr>
        <tr>
          <td style="border: 1px solid #ddd; padding: 10px;"><code>useAsyncData</code></td>
          <td style="border: 1px solid #ddd; padding: 10px;">自定义异步数据获取</td>
          <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
          <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
        </tr>
      </table>
    </div>

    <hr>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script setup lang="ts">
// ==================== 模式一：通过 Nuxt Server API（推荐） ====================

// 1. 使用 useFetch - 组件加载时自动执行
const { data: users, refresh: refreshUsers } = await useFetch('/api/users', {
  // 默认只在服务端执行一次，客户端使用序列化的数据
  // 如果想在客户端也执行，设置 server: false
  lazy: true // 不阻塞导航
})

const post = ref(null)
const fetchPost = async (id: number) => {
  // 使用 $fetch - 手动触发
  const result = await $fetch(`/api/posts/${id}`)
  post.value = result
}

// 2. POST 请求示例
const loginForm = reactive({
  username: '',
  password: ''
})
const loginResult = ref('')

const handleLogin = async () => {
  try {
    const result = await $fetch('/api/auth/login', {
      method: 'POST',
      body: loginForm
    })
    loginResult.value = '登录成功：' + JSON.stringify(result)
  } catch (error: any) {
    loginResult.value = '登录失败：' + error.message
  }
}

const fetchUsers = async () => {
  await refreshUsers()
}

// ==================== 模式二：直接调用外部 API ====================

const directData = ref(null)
const fetchDirectly = async () => {
  // 直接调用外部 API
  const data = await $fetch('https://jsonplaceholder.typicode.com/todos/1')
  directData.value = data
  
  console.log('⚠️ 这个请求在浏览器控制台可见（如果在客户端执行）')
}

// ==================== 高级用法 ====================

// 带认证的请求示例
const fetchWithAuth = async () => {
  const data = await $fetch('/api/protected-endpoint', {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  })
  return data
}

// 使用 useAsyncData 自定义
const { data: customData } = await useAsyncData('custom-key', async () => {
  // 可以执行任何异步操作
  const result1 = await $fetch('/api/users')
  const result2 = await $fetch('/api/posts/1')
  
  return {
    users: result1,
    post: result2
  }
}, {
  lazy: true
})
</script>

<style scoped>
button {
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #369970;
}

pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
}
</style>

